CanvasParticle({
    vx: 4, //小球x轴速度,正为右，负为左
    vy: 4, //小球y轴速度
    height: 2, //小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 200, //点个数
    // color: "121, 162, 185", 	//点颜色
    color: "200,193,193", //点颜色
    // stroke: "130,255,255", 		//线条颜色
    // stroke: "240,250,228", 		//线条颜色
    stroke: "0,0,0", //线条颜色
    dist: 6000, //点吸附距离
    e_dist: 20000, //鼠标吸附加速距离
    max_conn: 10 //点到点最大连接数
})

// let data = [
//     { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
//     { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
//     { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
// ]

// //定义代码片段
// let dataHtml = '';

// data.forEach(function(v, i) {
//     dataHtml += `
//     <liclass="${i===0 ? 'beijingtu' : ''}" data-price="${v.price}" data-unitPrice="${v.unitPrice}">${v.count}次</li>
//     `

// })

//渲染到页面
// $('.writing6').innerHTML=dataHtml


//事件委派
$('.writing3').addEventListener('click', function(e) {
    //判断当点击时返回LI   
    if (e.target.nodeName === "LI") {
        // console.log($('.writing3').children);
        //遍历
        [...($('.writing3').children)].forEach(function(v) {
            // console.log(v);
            v.classList.remove('beijingtu')

        })
        e.target.classList.add('beijingtu')

    }

})


//点击切换效果

// 分别获取所有的li标签和div标签
let li = $a('.control2 li') //代表上面的选项li标签
let div = $a('.control4') // 代表下面的文本
    //首先遍历所有的li标签，
li.forEach(function(v, i) {
    //给li标签都添加点击属性
    v.addEventListener('click', function() {
        //遍历li标签，清空属性
        li.forEach(function(value) {
                value.className = ''

            })
            //每点击一次就给自身添加属性
        this.className = 'bot'


        //遍历所有的div标签  
        div.forEach(function(v, i) {
                //每点击一次就删除blk属性
                v.classList.remove('blk')

            })
            //每点击一次就添加blk属性
        div[i].classList.add('blk')
    })


})
$('.li-1').addEventListener('click',function(){
    // console.log(1);
    $('.writingspan1').textContent='￥1200'
    $('.writingspan2').textContent='0.3000'
})
$('.li-2').addEventListener('click',function(){
    // console.log(1);
    $('.writingspan1').textContent='￥2000'
    $('.writingspan2').textContent='0.2500'
})
$('.li-3').addEventListener('click',function(){
    // console.log(1);
    $('.writingspan1').textContent='￥8000'
    $('.writingspan2').textContent='0.2000'
})